<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="我的钱包" navbarType='3'></wlk-navbar>
         <view class="wallet-card bgw mt40 relative overHidden shadow" >
             <view class="title">钱包余额（元）</view>
             <view class="num mt20">
                 {{userInfo.money}}
             </view>
             <view class="icon">
                 <u-icon name="rmb-circle" color="#FFFFFF" size="20"></u-icon>
             </view>
         </view>

        <view class="wallet-cell bgw shadow">
            <u-cell-group :border="false">
                <u-cell :border="false" isLink @click="$Router.push('/pages/wallet/recharge')">
                    <uni-icons slot="icon" type="scan" size="25"></uni-icons>
                    <text class="title" slot="title">充值</text>
                </u-cell>
                <u-cell :border="false" isLink @click="$Router.push('/pages/wallet/withdraw')">
                    <uni-icons slot="icon" type="wallet" size="25"></uni-icons>
                    <text class="title" slot="title">提现</text>
                </u-cell>
                <u-cell :border="false" isLink @click="$Router.push('/pages/wallet/list')">
                    <uni-icons slot="icon" type="bars" size="25"></uni-icons>
                    <text class="title" slot="title">账单</text>
                </u-cell>
            </u-cell-group>
        </view>
	</view>
</template>

<script>
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['userInfo','initRecharge','themeColor']),
        },
        mounted() {

        },
		data() {
			return {

			};
		},
        onShow() {
            this.isLogin?this.getUserInfo():'';
        },
        // 下拉刷新
        onPullDownRefresh() {
            this.isLogin?this.getUserInfo():'';
        },
        methods: {
            ...mapActions(['getUserInfo']),
        }
	}
</script>

<style lang="scss">
    page{
        .wallet-card{
            width: 92%;
            margin: 40rpx auto auto auto;
            height: 300rpx;
            border-radius: 20px;
            background-image: radial-gradient(circle at 13% 47%, rgba(140, 140, 140,0.03) 0%, rgba(140, 140, 140,0.03) 25%,transparent 25%, transparent 100%),radial-gradient(circle at 28% 63%, rgba(143, 143, 143,0.03) 0%, rgba(143, 143, 143,0.03) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 81% 56%, rgba(65, 65, 65,0.03) 0%, rgba(65, 65, 65,0.03) 12%,transparent 12%, transparent 100%),radial-gradient(circle at 26% 48%, rgba(60, 60, 60,0.03) 0%, rgba(60, 60, 60,0.03) 6%,transparent 6%, transparent 100%),radial-gradient(circle at 97% 17%, rgba(150, 150, 150,0.03) 0%, rgba(150, 150, 150,0.03) 56%,transparent 56%, transparent 100%),radial-gradient(circle at 50% 100%, rgba(25, 25, 25,0.03) 0%, rgba(25, 25, 25,0.03) 36%,transparent 36%, transparent 100%),radial-gradient(circle at 55% 52%, rgba(69, 69, 69,0.03) 0%, rgba(69, 69, 69,0.03) 6%,transparent 6%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
            padding: 50rpx 35rpx;
            .title{
                font-size: $font-lt;
            }
            .num{
                font-size: 50rpx;
                font-weight: bold;
            }
            .icon{
                background: linear-gradient(to left bottom, #ffae86, #ff7d67);
                padding: 15rpx 30rpx;
                border-radius: 20px 0 20px 4px;
                overflow: hidden;
                display: flex;
                align-items: center;
                position: absolute;
                bottom: 0;
                right: 0;
                box-shadow: -8px 3px 0 #F6E8E5;
            }

        }
        .wallet-cell{
            width: 92%;
            margin: 40rpx auto auto auto;
            border-radius: 8px;
            padding: 30rpx 0;
            .title{
                font-size:$font-base;
                margin-left: 10rpx;
            }
        }
    }
</style>
